var imgs = document.querySelectorAll('.zhong img')
var zimg = document.querySelector('.zuo img')
var zzc = document.querySelector('.zzc')
var you = document.querySelector('.you')
var zuo=document.querySelector('.zuo')
for (i = 0; i < imgs.length; i++) {
    imgs[i].onmouseover = function () {
        this.style.border = '2px solid blue'
        zimg.src = this.src
    }
    imgs[i].onmouseout = function () {
        this.style.border = ''
    }
}
zuo.onmouseenter = function () {
    zzc.style.display = 'block'
    you.style.display = 'block'
}
zuo.onmouseleave = function () {
    zzc.style.display = 'none'
    you.style.display = 'none'
}
zimg.onmousemove = function (e) {
    zzc.style.display = 'block'
    var a = e.pageX - 100
    var b = e.pageY - 100
    a = a < 0 ? 0 : a
    b = b < 0 ? 0 : b
    a = a > 200 ? 200 : a
    b = b > 200 ? 200 : b
    zzc.style.left=a+'px'
    zzc.style.top=b+'px'
    you.style.backgroundImage = `url(${this.src})`
    you.style.backgroundPosition = `${-2 * a}px ${-2 * b}px`
}
